<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
    <div>
      <el-input  v-model="search" placeholder="请输入内容"></el-input>
      <el-button>默认按钮</el-button>
      <el-button type="primary" @click="test">hello</el-button>
      <el-button type="primary" @click="add">{{count}}</el-button>
      <el-button type="success" @click="back">geback</el-button>
      <el-button type="info" @click="toTest">vuex</el-button>
      <el-button type="warning" @click="test2">axios</el-button>
      <el-button type="danger" @click="getSth">get</el-button>
      <div>{{name}}</div>
      <el-table
        :data="this.data"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="name"
          width="180">
        </el-table-column>
        <el-table-column
          prop="code"
          label="code"
          width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import ElInput from "element-ui/packages/input/src/input";

  export default {
    components: {ElInput},
    name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      count:0,
      search:'',
      name:'aaaa',
      data:[]
    }
  },
  methods:{
    test(){
      this.msg = "hello wrold"
    },
    back(){
      this.$router.push("/login")
    },
    add(){
      this.count++;
    },
    toTest(){
      this.$router.push("/test")
    },
    test2(){
      this.axios.get("https://easy-mock.com/mock/5a4eee8cdd9300700adaf9c9/example/query?name=" + this.search,
      ).then((response) => {
          this.name = response.data.data.name;
          console.log(this.name);
        }).catch((error) => {
          console.log(error);
        });
    },
    getSth(){
      this.axios.get('http://localhost:9999/gxkygl/dict_detail/query')
        .then((response) => {
          this.data = response.data.data.rows;
          console.log(this.data);
          console.log(response);
        })
        .catch((error) =>{
          console.log(error);
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
